<!-- A.html -->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>A</title>
	</head>

	<body>
		<!-- 
        我们想实现父页面A操控子页面A，B，并且让子页面和父页面交互，这里我们主要使用 iframe的
        contentWindow
        parent.window 通过contentWindow，我们可以拿到iframe内部的方法和dom元素，进而可以操控iframe页面
     -->

		<h1>A 页面</h1>
		<div id="bridge"></div>
		<iframe src="./a1.html" id="a1" frameborder="0"></iframe>
		<iframe src="./a2.html" id="a2" frameborder="0"></iframe>
		<script>
			// 父页面
			window.onload = function () {
				let iframe1 = $id('a1').contentWindow;
				let iframe2 = $id('a2').contentWindow;
				// 控制子页面dom
				iframe1.document.body.style.background = 'pink';
				iframe2.loadData({ a: '1' });
			};

			function $id(id) {
				return document.getElementById(id);
			}
		</script>
	</body>
</html>
